<template>
  <div>{{ title }}</div>
  <div>
    <el-input v-model="info"></el-input>
    <el-button @click="ok" type="success">确定</el-button>
    {{ info }}
  </div>

  <div>
    <!-- v-model是将js中的变量和表单元素的值进行双向绑定 -->
    <el-input v-model="echo"></el-input>
    <!-- @事件名称="方法名" 表示事件触发时执行方法 -->
    <el-button @click="sendEcho" type="primary">发送</el-button>
  </div>

  <!-- <div>{{ echoInfo }}</div> -->
  <div>
    <!-- {{ js中ref声明的变量 }} -->
    {{ echoInfo.message }} {{ echoInfo.data }}
  </div>
</template>
<script setup>
import { ref } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { api } from '../../js/ajax'
// ref表示声明响应式变量,这种变量可以和页面元素进行双向绑定
const title = ref('vue你好')
const info = ref('')
const echo = ref('请输入文字')
const echoInfo = ref({})

const sendEcho = () => {
  api.get('/test/echo', { echo: echo.value }, data => {
    echoInfo.value = data
  })
}

api.test()
const ok = () => {
  ElMessage(info.value)
  ElMessageBox.alert('你输入的是：' + info.value, '提示框')
}
</script>
